<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>课程详情</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/exanIndex.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div v-cloak id="zbom">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">课程详情</h4>
	</header>
	
	<!--<nav class="h5 bg-w searchMod">
	</nav>-->
	
	<footer class="footer top-line" v-if="nav == 0">
		<button class="addLesson" type="button" @click="addLesson" data-type="0">立即报名</button>
	</footer>
	
	<div class="footer top-line" v-if="nav == 2">
		<button class="addLesson" type="button" @click="openPage">发表评价</button>
	</div>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="exam_dtl">
					
					<div class="top_photo">
						<img src="image/exam/exam_cover.jpg" />
					</div>
					
					<!--基础信息-->
					<div class="base-info bg-w">
						<h4 class="name">{{lesson.name}}</h4>
						<h5 class="classify dm-clearfix">
							{{lesson.classify}}
							<span class="type h6">线下</span>
							<span class="num dm-right">已有100人学习</span>
						</h5>
					</div>
					
					<!--切换-->
					<div class="tabNav tc flex-row bottom-line">
						<a :class="nav==0 ? 'on flex-full' : 'flex-full'" @click="tabNav(0)">课程详情</a>
						<a :class="nav==1 ? 'on flex-full' : 'flex-full'" @click="tabNav(1)">课程学习</a>
						<a :class="nav==2 ? 'on flex-full' : 'flex-full'" @click="tabNav(2)">课程评价</a>
					</div>
					
					<!--课程三大块-->
					<div class="threeMod">
						<!--详情-->
						<template v-if="nav == 0">
							<div class="dm-mb bg-w">
								<div class="dm-title bottom-line"><span>课程简介</span></div>
								<div class="intro">这里是课程简介这里是课程简介这里是课程简介这里是课程简介这里是课程简介这里是课程简介这里是课程简介这里是课程简介</div>
							</div>
							
							<div class="dm-mb bg-w">
								<div class="dm-title bottom-line"><span>课程时间</span></div>
								<div class="intro">2018-12-20 14:00:00</div>
							</div>
							
							<div class="dm-mb bg-w">
								<div class="dm-title bottom-line"><span>课程地点</span></div>
								<div class="intro">志邦总部研发楼202</div>
							</div>
							
							<div class="dm-mb bg-w">
								<div class="dm-title bottom-line"><span>课程大纲</span></div>
								<div class="intro" style="padding-bottom: 0;overflow: hidden;padding-top: 6px;">
									<dl class="lesson_list bottom-line">
										<dt class="lesson_first h5 flex-row">
											<div class="main_title flex-full dm-wrap">一、这里是一级标题这里是一级标题</div>
											<!--<span class="ani icon">
												<img src="image/icon/arrow-bottom.png" />
											</span>-->
										</dt>
										<dd class="lesson_second">
											<h5 class="txt dm-wrap">1、这里是二级标题</h5>
											<h5 class="txt dm-wrap">2、这里是二级标题</h5>
											<h5 class="txt dm-wrap">3、这里是二级标题</h5>
										</dd>
									</dl>
									<dl class="lesson_list bottom-line">
										<dt class="lesson_first h5 flex-row">
											<div class="main_title flex-full dm-wrap">二、这里是一级标题这里是一级标题</div>
											<!--<span class="ani icon">
												<img src="image/icon/arrow-bottom.png" />
											</span>-->
										</dt>
										<dd class="lesson_second">
											<h5 class="txt dm-wrap">1、这里是二级标题</h5>
											<h5 class="txt dm-wrap">2、这里是二级标题</h5>
											<h5 class="txt dm-wrap">3、这里是二级标题</h5>
										</dd>
									</dl>
								</div>
							</div>
							
						</template>
						<!--学习-->
						<template v-if="nav == 1">
							<ul class="study_mod bg-w dm-mb">
								<li class="dm-title bottom-line">企业战略管理章节一</li>
								<li class="study_box">
									<dl class="color-1 box flex-col" @click="location.href='courses_video.html'">
										<dt class="big">企业管理章节一</dt>
										<dd class="sub">项目管理课程章节-如何管理(上)</dd>
										<dd class="type">视频</dd>
									</dl>
									<dl class="color-2 box flex-col" @click="location.href='examTest.html'">
										<dt class="big">企业管理章节二</dt>
										<dd class="sub">项目管理课程章节-如何管理(中)</dd>
										<dd class="type">测试</dd>
									</dl>
									<dl class="color-3 box flex-col" @click="location.href='courses_ware.html'">
										<dt class="big">企业管理章节三</dt>
										<dd class="sub">项目管理课程章节-如何管理(下)</dd>
										<dd class="type">课件</dd>
									</dl>
								</li>
							</ul>
							
							<ul class="study_mod bg-w dm-mb">
								<li class="dm-title bottom-line">企业战略管理章节二</li>
								<li class="study_box">
									<dl class="color-1 box flex-col" @click="location.href='courses_video.html'">
										<dt class="big">企业管理章节一</dt>
										<dd class="sub">项目管理课程章节-如何管理(上)</dd>
										<dd class="type">视频</dd>
									</dl>
									<dl class="color-2 box flex-col" @click="location.href='examTest.html'">
										<dt class="big">企业管理章节二</dt>
										<dd class="sub">项目管理课程章节-如何管理(中)</dd>
										<dd class="type">测试</dd>
									</dl>
									<dl class="color-3 box flex-col" @click="location.href='courses_ware.html'">
										<dt class="big">企业管理章节三</dt>
										<dd class="sub">项目管理课程章节-如何管理(下)</dd>
										<dd class="type">课件</dd>
									</dl>
								</li>
							</ul>
						</template>
						<!--评价-->
						<template v-if="nav == 2">
							<ul class="pj_mod bg-w dm-mb" v-for="item in pj_list">
								<li class="pj_h bottom-line flex-row">
									<div class="name h5 flex-full">{{item.name}}
										<span class="h6">{{item.part}}</span>
									</div>
									<h6 class="time">{{item.time}}</h6>
								</li>
								<li class="txt h5">{{item.txt}}</li>
							</ul>
						</template>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
	
	
	<!--发表评论-->
	<div class="subMain animate" id="subPage">
		<header class="header">
			<a class="left_icon back_btn" data-type='1'></a>
			<h4 class="title">评价</h4>
		</header>
		<div class="swiper-container Main" id="subMain">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					<div class="children">
						
						<textarea name="" rows="10" maxlength="200" class="pj_text" placeholder="请输入您对此课程想说的话"></textarea>
						
						<button class="submitBtn" @click="enterPage" type="button">发表评价</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>


<!--引入模拟数据-->
<script src="data/examData.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#zbom",
	data:{
		swiper:null,
		lesson:{},
		nav:0,
		pj_list:[
			{name:'王文雨',part:'部门经理',time:'2018-12-12 18:23:24',txt:'这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容'},
			{name:'刘澄澄',part:'部门经理',time:'2018-12-12 18:23:24',txt:'这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容'},
			{name:'张志超',part:'部门经理',time:'2018-12-12 18:23:24',txt:'这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容这里是评论的内容'}
		]
	},
	methods:{
		//获取id对应数据
		getData:function(){
			var id = getUrlParam('id');
			for(var i=0;i<courses.length;i++){
				if(courses[i].id == id){
					this.lesson = courses[i];
				};
			};
		},
		
		//切换
		tabNav:function(type){
			this.nav = type;
			this.swiper.setWrapperTranslate(0);
		},
		
		//添加课程
		addLesson:function(e){
			var target = e.currentTarget;
			var type = target.getAttribute('data-type');
			if(type == 0){
				target.innerHTML = '已报名';
				target.setAttribute('data-type',1);
				tip('报名成功')
			}else{
				target.innerHTML = '立即报名';
				target.setAttribute('data-type',0);
				tip('取消成功')
			};
		},
		
		//收放课程列表
//		lessonSlide:function(e){
//			var target = e.currentTarget;
//			var val = target.getAttribute('data-val');
//			if(val == 0){
//				//展开
//				$(target).next().slideDown();
//				$(target).attr('data-val',1);
//			}else{
//				//收起
//				$(target).next().slideUp();
//				$(target).attr('data-val',0);
//			};
//		},


		//打开评价
		openPage:function(){
			openSubMain("#subPage");
		},
		
		//确定
		enterPage:function(){
			var target = $("#subPage");
			closeSubMain(target);
		},
	},
	mounted:function(){
		var that = this;
		this.swiper = pullSwiper('#Main',{
			up:true,
			//down:true,
		});
		pullSwiper('#subMain');
		this.getData();
	}
});


//刷新数据
function refresh(pull){
	pull.innerText = '刷新成功';
};

//加载数据
//function reload(pull){
//	pull.innerText = '已加载全部数据'
//};

</script>

</body>
</html>
